<script lang="ts" setup>
	import getLocationAuth from '@/utils/getLocationAuth.js' //开启定位方法
	import list from '@/components/list2.vue'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import user from '@/api/user.js'
	import comSearch from '@/components/search.vue'
	let gather: any = reactive({
		userinfo: {},
		address: {},
		headimg: '',
		articleList: [],
		nums: {},
		id: null,
	})
	let page = 1
	let pageSize = 10
	let status = ref('loading')
	//下拉刷新阈值
	let _triggered = ref(false)
	let triggered = ref(false)
	let swiperCurrent = ref < number > (0)
	let navList = [{
			name: '微博',
			id: 'wb'
		},
		{
			name: '相册',
			id: 'xc'
		},
	]
	let searchValue = ref('')
	let isShow = ref<boolean>(false)//搜索框显示
	
	const getUserInfo = async (id:string|number) => {
		
		const res = await user.getUserInfo(id)
		gather.userinfo = res.data
		getArticleList(()=>{})
	}
	onLoad((op) => {
		gather.id = op.id
		getUserInfo(op.id)
		getUserDetial(op.id)
		// #ifdef APP-PLUS
		uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success: res => {
				// province city district street 省市区
				gather.address = res.address
			},
			fail: () => {
				getLocationAuth()
			}
		})
		// #endif

		// #ifdef H5
		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			isHighAccuracy: true,
			success: function(res) {
				gather.address = {
					province: '四川省',
					city: '成都市'
				}
			}
		});
		// #endif

	})
	const back = () => {
		uni.navigateBack()
	}
	const edit = () => {

	}
	//中止触发
	const onAbort = (value: any) => {
		triggered.value = false
	}
	const moreStatus = (val) => {
		status.value = val
	}
	const getArticleList = async (cb: Function) => {
		status.value = 'loading'
		const res = await user.getArticleList({
			page: page,
			pageSize: pageSize,
			userid: gather.userinfo.userid,
			searchValue: searchValue.value
		})
		gather.articleList = [...gather.articleList, ...res.data]
		cb()
		if(res.total <= pageSize){
			status.value = 'nomore'
		}else{ 
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		page += 1 // 当前页加1
	}
	//刷新触发
	const onRefresh = (value: any) => {
		if (_triggered.value) return
		_triggered.value = true
		if (!triggered.value) triggered.value = true
		getArticleList(() => {
			triggered.value = false
			_triggered.value = false
		})
	}
	//复位
	const onRestore = (value:any) => {
		triggered.value = false
		_triggered.value = false
	}
	const listSwitch = (value: any) => {
		swiperCurrent.value = value.current
	}
	const cancel = () => {
		isShow.value = false
	}
	const search = (text: string) => {
		searchValue.value = text
		getArticleList(()=>{
			isShow.value = false
		})
	}
	const getUserDetial = async (id: string | number) => {
		const res = await user.getUserDetial({
			userid: id
		})
		gather.nums = res.data
	}
	const clickRight = () => {
		isShow.value = true
	}
	const skip = (str: string,type: Boolean = false) => {
		if(type) {
			uni.redirectTo({
				url: str,
			})
		}else{
			uni.navigateTo({
				url: str
			})
		}
		
	}
</script>

<template>
	<view class="main">
		<com-search @search="search" @cancel="cancel" v-if="isShow"></com-search>
		
		<view class="flex flex-dir-c list" v-else>
			<view>
				<uni-nav-bar @clickRight="clickRight" right-icon="search" left-icon="back" @clickLeft="back"></uni-nav-bar>
				<view class="head">
					<view class="flex flex-ai-c">
						<view class="head-img" style="width: 150rpx;height: 150rpx;">
							<image :src="gather.userinfo.handimg || gather.handimg"></image>
						</view>
						<view style="margin-left: 20rpx;">
							<view>{{gather.userinfo.username}}</view>
							<view class="flex flex-ai-c" style="margin-top: 10rpx;">
								<view @click="skip(`/pages_me/follow/follower?id=${gather.id}`,false)">{{gather.nums.fanNum}}粉丝</view>
								<view style="margin: 0 20rpx;" @click="skip(`/pages_me/follow/index?id=${gather.id}`,false)">{{gather.nums.followNum}}关注</view>
								<view>7赞</view>
							</view>
						</view>
					</view>
					<view class="info">
						<view>简介：{{gather.userinfo.sign||'这个人很懒'}}</view>
						<view>ip：{{gather.address.province}} {{gather.address.city}}</view>
					</view>
				</view>
				<view class="edit" @click="edit">更多资料</view>
				<u-tabs class="tabs" active-color="rgb(252,186,13)" :list="navList" :is-scroll="false"
					v-model="swiperCurrent"></u-tabs>
			</view>
			
			<view class="list">
				<list :status="status" @scrolltolower="getArticleList(()=>{})" @listSwitch="listSwitch" :navList="navList" :swiperCurrent="swiperCurrent" :list="gather.articleList"
					@onAbort="onAbort" @onRefresh="onRefresh" @onRestore="onRestore" :triggered="triggered" />
			</view>
		</view>
	</view>
	
</template>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.main{
		height: 100%;
	}
	.list{
		height: 100%;
	}
	.edit {
		border: 1px solid gainsboro;
		border-radius: 30rpx;
		width: 250rpx;
		height: 60rpx;
		color: gray;
		line-height: 60rpx;
		text-align: center;
		margin: 0 auto;
	}

	.head {
		padding: 0 20rpx;

		.info {
			margin-top: 20rpx;
		}
	}
</style>
